<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg"
    class="animated-icon"
  >
    <!-- 背景圆圈 -->
    <circle cx="512" cy="512" r="400" stroke="#F3F3F3" stroke-width="70" fill="none" />
    <!-- 动画圆圈 -->
    <circle
      cx="512"
      cy="512"
      r="400"
      :stroke="color"
      stroke-width="70"
      fill="none"
      stroke-dasharray="628.318 1884.954"
      stroke-dashoffset="0"
      :class="{ animate: isAnimating }"
    />
  </svg>
</template>

<script lang="ts" setup>
defineProps({
  size: {
    type: String,
    default: '64px'
  },
  color: {
    type: String,
    default: '#000'
  },
  isAnimating: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.animated-icon {
  display: block;
  margin: auto;
}

.animate {
  animation: dash 2s linear infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -2512; /* 2*PI*400 */
  }
}
</style>
